<template>
    <div class="yinziBox">
        <el-form ref="formRef" :model="state.formData" :rules="state.rules" label-position="top">
            <el-row :gutter="20" style="margin-top:10px;">
                <!-- <el-col :span="12" v-if="!cardList[0].pumpType && !cardList[0].code.includes('D')">
                    <el-form-item label="名称" prop="name">
                        <el-input class="w100" v-model="state.formData.name" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12" v-if="!cardList[0].pumpType && !cardList[0].code.includes('D')">
                    <el-form-item label="安装地点" prop="place">
                        <el-input class="w100" v-model="state.formData.place" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-col> -->
                <el-col :span="24">
                    <p class="mask_sub_title">
                        <svg-icon class-name="search-icon" icon-class="biaotitubiao" /><span>编辑公式</span></p>
                    <el-form-item label="测点因子" prop="parentAreaId">
                        <el-tag class="hover" style="margin-right:10px;" v-for="tag in cardList" :key="tag.code"
                            closable @close="handleClose(tag)" @click="processbtnClick(tag.code,tag.name,tag.place)" v-show="tag.status !='A'">
                            <span >{{ tag.code }}</span>
                        </el-tag>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="运算符号" prop="stationTypeName">
                        <el-button style="padding:20px;margin:10px 5px;" v-for="item in biaodaList" plain
                            @click="processbtnClick(item.sub)">
                            {{ item.name }}<br />
                            {{ item.sub }}
                        </el-button>
                    </el-form-item>
                </el-col>
                <p style="font-size:14px;margin-left:10px;">公式（请点击上方计算因子与运算符号填入公式，
                    不支持手动输入）</p>
                <el-col :span="24">
                    <el-form-item label="" prop="stationTypeName">
                        <div class="fbc w100">
                            <el-input disabled style="width:98%;" :rows="3" id="textarea" type="textarea"
                                v-model="state.formData.expression" placeholder="请输入">
                            </el-input>
                            <span style="white-space: pre-wrap;display:inline-block
                                ;background: rgba(0, 186, 173, 1);
                                border-radius: 0px 2px, 2px, 0px;
                                color:#fff;writing-mode: vertical-rl;
                                padding:10px;
                                cursor: pointer;
                                " @click="yanzheng">验证公式</span>
                        </div>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div class="footer-form" style="text-align:right;">
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="submitForm">
                确定
            </el-button>
        </div>
    </div>
</template>
<script setup>
    import {
        computed,
        reactive,
        watchEffect
    } from 'vue';
    import axios from "@/utils/request"
    import {
        searchchannelNoList
    } from '@/api/config'
    import useUserStore from "@/store/modules/user";
    import {
        ElMessage
    } from "element-plus";
    import _ from 'lodash'
    const {
        proxy
    } = getCurrentInstance();
    const userStore = useUserStore();
    const emits = defineEmits()
    const props = defineProps({
        listAnalog: {
            type: Array,
            default: () => {
                return []
            }
        },
        cardList: {
            type: Array,
            default: () => {
                return []
            }
        },
        biaodaList: {
            type: Array,
            default: () => {
                return [{
                        name: '加',
                        sub: '+'
                    }, {
                        name: '减',
                        sub: '-'
                    }, {
                        name: '乘',
                        sub: '*'
                    }, {
                        name: '除',
                        sub: '/'
                    }, {
                        name: '左括号',
                        sub: '('
                    }, {
                        name: '右括号',
                        sub: ')'
                    }, {
                        name: '与',
                        sub: '&&'
                    }, {
                        name: '或',
                        sub: '||'
                    }, {
                        name: '等于',
                        sub: '=='
                    }, {
                        name: '大于',
                        sub: '>'
                    }, {
                        name: '大于等于',
                        sub: '>='
                    },
                    {
                        name: '小于',
                        sub: '<'
                    }, {
                        name: '小于等于',
                        sub: '<='
                    }, {
                        name: '撤',
                        sub: '销'
                    }, {
                        name: '清',
                        sub: '空'
                    }
                ]
            }
        },
    })
    // 重点
    const state = reactive({
        dynamicTags: [],
        conditionList: [],
        biaodaList: [{
                name: '加',
                sub: '+'
            }, {
                name: '减',
                sub: '-'
            }, {
                name: '乘',
                sub: '*'
            }, {
                name: '除',
                sub: '/'
            }, {
                name: '左括号',
                sub: '('
            }, {
                name: '右括号',
                sub: ')'
            }, {
                name: '与',
                sub: '&&'
            }, {
                name: '或',
                sub: '||'
            }, {
                name: '等于',
                sub: '=='
            }, {
                name: '大于',
                sub: '>'
            }, {
                name: '大于等于',
                sub: '>='
            },
            {
                name: '小于',
                sub: '<'
            }, {
                name: '小于等于',
                sub: '<='
            }, {
                name: '清',
                sub: '空'
            }
        ],
        formData: {

        },
        rules: {
            name: [{
                required: true,
                message: '请输入',
                trigger: 'blur'
            }],
            place: [{
                required: true,
                message: '请输入',
                trigger: 'blur'
            }],
            
        },
        quashList: [], //存撤销数据
        indexRef: 0
    })


    const handleKeydown = (event) => {
        if (event.key >= '0' && event.key <= '9' || event.key == '.') {
        }else{
          event.preventDefault();
        }
    }

    function handleClose(tag) {
        state.dynamicTags=_.pullAllWith(state.dynamicTags, [tag], _.isEqual);
    }
    const cardListnew=computed(()=>{
        let arr=[]
        props.cardList.forEach(item=>{
            if(item.status !='A'){
                arr.push  
            }
        })
      return arr
    })

    function processbtnClick(myValue, type, place) {
        if (type) {
            if (!state.formData.nameDtoList) {
                state.formData.nameDtoList = []
            }
            state.formData.nameDtoList.push({
                name: type,
                code: myValue,
                place: place,
                marker: false
            })
        }  
        
        if (myValue != '空' && myValue != '销') {
            const myField = document.querySelector('#textarea')
            var startPos = myField.selectionStart
            var endPos = myField.selectionEnd
            state.formData.expression = myField.value.substring(0, startPos) + myValue +
                myField.value.substring(endPos,
                    myField.value
                    .length)
            state.quashList.length = state.indexRef + 1
            state.quashList.push(state.formData.expression)
            state.indexRef++
            nextTick(() => {
                myField.focus()
                myField.setSelectionRange(endPos + myValue.length, endPos + myValue.length)
            })
        } else if (myValue == '空') {
            state.formData.expression = ''
            state.quashList.push('')
            state.indexRef = 1
        } else if (myValue == '销') {
            state.indexRef--
            state.formData.expression = state.quashList[state.indexRef];
        }
    }

    function yanzheng() {
        if(props.cardList[0].pumpType){
            // 瓦斯抽放逻辑校验
            axios.post('/drain/calculation/checkExpression', {
                expression: state.formData.expression,
                pointDtoList: state.formData.nameDtoList
            }).then(res => {
                if (res.code == 200) {
                    ElMessage.success(res.data)
                }
            })
        }else{
            axios.post('/combination/checkExpression', {
                expression: state.formData.expression,
                pointDtoList: state.formData.nameDtoList
            }).then(res => {
                if (res.code == 200) {
                    ElMessage.success(res.data)
                }
            })
        }
    }

    function submitForm() {
        proxy.$refs["formRef"].validate(valid => {
            if (valid) {
                let data = {}
                if(props.cardList[0].pumpType){
                    data = {
                        code: state.formData.expression,
                        name: state.formData.nameDtoList.map(item=>{return item.name}).join(','),
                        place: '-',
                        pipeType:'-',
                        status: 'A',
                        title:state.formData.expression,
                        marker:true,
                        objarr:[
                            {left:'管道名称',right:state.formData.expression},
                            {left:'管道类型',right:'-'},
                            {left:'位置',right:'-'}
                        ]
                    }
                }else{
                    data = {
                        code: state.formData.expression,
                        name: state.formData.nameDtoList.map(item=>{return item.name}).join(','),
                        place: state.formData.place,
                        status: 'A'
                    }
                    // if(props.cardList[0].code.includes('D')){
                        data.objarr=[
                            {left:'编号',right:state.formData.expression},
                            {left:'名称',right:state.formData.nameDtoList.map(item=>{return item.name}).join(',')},
                            {left:'位置',right:'-'}
                        ]
                        data.title = state.formData.nameDtoList.map(item=>{return item.name}).join(',')
                        data.name = state.formData.nameDtoList.map(item=>{return item.name}).join(',')
                        data.place = '-'
                        data.marker = true
                    // }
                }
                if(props.cardList[0].pumpType){
                    // 瓦斯抽放逻辑校验
                    axios.post('/drain/calculation/checkExpression', {
                        expression: state.formData.expression,
                        pointDtoList: state.formData.nameDtoList
                    }).then(res => {
                        if (res.code == 200) {
                            ElMessage.success(res.data)
                            emits('expressionList', data,false)
                        }
                    })
                }else{
                    axios.post('/combination/checkExpression', {
                        expression: state.formData.expression,
                        pointDtoList: state.formData.nameDtoList
                    }).then(res => {
                        if (res.code == 200) {
                            ElMessage.success(res.data)
                            emits('expressionList', data,false)
                        }
                    })
                }
            }
        })
    }
    function cancel(){
        emits('expressionList', undefined,false)
    }
    watchEffect(() => {
        // state.quashList = [state.formData.expression]
    })
</script>
<style lang="scss" scoped>
    .yinziBox {
        padding: 10px
    }
</style>